<div class="white_bg">
	<link type="text/css" href="/public/library/jqueryui/themes/ui-smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="/public/library/jqueryui/jquery-ui-1.7.2.custom.min.js"></script>
	<div class="chitiet_bar" style="width:100%">
		<div class="chitiet_bar_left"/>
		<div class="chitiet_bar_right">Widget Manage</div>
	</div>

	<div style="clear:both"></div>	

	<div style="min-height: 50px;background-color: white"> 
		Form here: Input: {site (hvn), theme(hard), master request (place/master/view)
		<br/>
		This form will determine: <br/>
		<br/>
			<b>1</b>. which template (page) => which layout appears below <br/>
			<b>2</b>. Which current widgets are on there <br/>
		<br/>
		Then we need a form to add widget to the regions on the template
		<br/>
		This ajax form will send {SITE, THEME, template (page), Region} => server will return list of widgets applicable
		and client will then render it to a draggable ul again
		
		<br/><br/><br/>
		<h1 style="font-weight:bold; font-size:20px">Sample 'page' template layout</h1>
		<br/>
		<br/>
	</div>

	<div class="left">
		<ul id="sortable">
			<li id="li1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li id="li2"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li id="li3"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li id="li4"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li id="li5"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li id="li6"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li id="li7"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
	</div>


	<div class="right">
		<ul id="sortable-right">
			<li id="l10" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
			<li id="l11"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
			<li id="l12"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
			<li id="l13"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
		</ul>
	</div>


	<div class="ajax-widgets">
		<b>Get dyn widgets to add</b> 
		<form>
			<input type="text" value="place/master/view"/>
			<input type="submit"/>
		</form>
		<br/>
		<ul id="sortable-ajax-widgets">
			<li id="l10" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
			<li id="l11"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
			<li id="l12"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
			<li id="l13"  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
		</ul>
	</div>
	
	<div style="clear:both;min-height:150px;background-color:red">
	adsbsdf
	</div>



<style type="text/css">		
	.left 
	{
		width: 300px;
		float:left;
		background-color: #0f67a1;
	}
	.draggable
	{
		/*width: 100%;*/
		border: 2px solid #808080;
	}
	
	.active-droppable
	{
		/*border: red;*/
		background-color: #96cefd;
	}
	
	.droppable
	{
		border: 2px solid black;
	}
	
	.right
	{
		float:left;
		width: 160px;
		background-color: white;
		border: 1px solid blue;
	}
	
	.ajax-widgets
	{
		float:left;
		width: 200px;
		background-color: white;
		border: 1px solid blue;
	}
	
	ul 
	{
		padding: 0px;
	}
	
	
	ul li 
	{
		list-style-type:none;
		padding : 0px;
	}
	
	#sortable { 
		list-style-type: none; 
		margin: 0; 
		padding: 0; 
		width: 100%; 
	}
	#sortable li { 
		margin: 0 3px 3px 3px; 
		padding: 0.4em; 
		padding-left: 1.5em; 
		font-size: 1.4em; 
		height: 18px; 
	}
	#sortable li span { 
		position: absolute; 
		margin-left: -1.3em; 
	}
</style>


	<script type="text/javascript">
	$(function() {
		$("#sortable").sortable(
			{
				'connectWith' : "#sortable-right",
				'change' : function (event, ui) {
					var order = $('#sortable').sortable('toArray');
					console.log("changed");
					console.log (order);
					//$("#info").load("process-sortable.php?"+order);
      			}
				
			}
		);
		$("#sortable-right").sortable(
			{
				'connectWith' : "#sortable",
			}
		);

        $(".draggable").draggable(
        {
                'snap' : true,
                'snapTolerance' : 3,
                'cursor' : 'move',
                //'containment' : '.droppable',
                'z-index' : 1500,
                
        });
                                        
        $(".droppable").droppable({
                drop: function() 
                { 
                        //alert('dropped'); 
                },
                'activeClass' : 'active-droppable',
                
        });
        
//        $(".sortable").sortable(
//        { 
//                items: 'li' 
//        });
		
		//$("#sortable").disableSelection();
	});
	</script>
</div>	